<template>
  <div style="width: 100px;">
    <el-button type="text" icon="el-icon-folder-add" @click="projectDialogVisible = true" style="margin-left:15px">
      管理项目
    </el-button>
    <!-- 项目管理对话框 -->
    <el-dialog title="项目管理" top="15px" :visible.sync="projectDialogVisible" width="80vw" :close-on-click-modal='false'>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card style="height: 80vh;" title="项目">
            <div slot="header" class="clearfix">
              <span>项目列表</span>
              <el-button type="primary" @click="editingGrp = {}; editingGrpVis = true">添加项目</el-button>
            </div>

            <!-- 项目列表 -->
            <el-table :data="taskGroups" border height="100%" @row-click="(r) => seletedPrj = r">
              <el-table-column prop="WTG_Title" label="项目名称" min-width="200" />
              <el-table-column label="审核方式" min-width="200">
                <template slot-scope="{row}">
                  {{ row.WTG_CheckPassWay == 1 ? "会签" : "或签" }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="{row}">
                  <el-button type="text" @click="editingGrp = { ...row }; editingGrpVis = true">修改</el-button>
                  <el-button type="text" @click="deleteGroup($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

        </el-col>
        <el-col :span="8">
          <el-card style="height: 80vh;" title="项目成员">
            <div slot="header" class="clearfix">
              <span>项目成员</span>
              <el-button :disabled="!seletedPrj" @click="addGroupUserVis = true">添加成员</el-button>
            </div>

            <el-table :data="grpUsers" border height="300">
              <el-table-column prop="USR_Name" label="用户" min-width="200" />
              <el-table-column prop="TR_Name" label="角色" width="120" />
              <el-table-column label="" width="120">
                <template slot-scope="{row}">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeGroupUser(row)" />
                </template>
              </el-table-column>
            </el-table>
          </el-card>

        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog title="添加成员" :visible.sync="addGroupUserVis" append-to-body width="600px" :close-on-click-modal='false'>
      <!--选择人员-->
      <div>
        <el-form label-width="100px">
          <el-form-item label="人员">
            <el-select v-model="addingUser.WTGU_EmpId" placeholder="请选择人员" style="width:100%" :filterable="true">
              <el-option v-for="user in users" :key="user.EMP_ID" :label="user.USR_Name" :value="user.EMP_ID" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色">
            <el-radio-group v-model="addingUser.WTGU_Role">
              <el-radio v-for="r in roles" :key="r.TR_ID" :value="r.TR_Code" :label="r.TR_Code">
                {{ r.TR_Name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>


      <!--添加-->
      <el-button type="primary" @click="addUsersToGroup">添加</el-button>
      <!--关闭-->
      <el-button @click="addGroupUserVis = false">关闭</el-button>
    </el-dialog>
    <el-dialog :title="editingGrp && editingGrp.WTG_ID ? '编辑项目' : '新增项目'" :visible.sync="editingGrpVis" append-to-body
      :close-on-click-modal='false' width="600px">
      <div>
        <!-- 新增项目表单 -->
        <el-form :model="editingGrp" :rules="groupRules" ref="groupForm" v-if="editingGrp" label-width="100px">
          <el-form-item label="项目名称" prop="WTG_Title">
            <el-input v-model="editingGrp.WTG_Title"></el-input>
          </el-form-item>
          <el-form-item label="审核方式" prop="WTG_CheckPassWay">
            <el-radio-group v-model="editingGrp.WTG_CheckPassWay">
              <el-radio-button :label="1" :value="1">会签</el-radio-button>
              <el-radio-button :label="2" :value="2">或签</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>

      </div> <template #footer>
        <el-button @click="addGroup">保存</el-button>
        <el-button type="danger" @click="editingGrp = null; editingGrpVis = false">取消</el-button>
      </template>
    </el-dialog>
  </div>

</template>
<script>
import { GetRoles, GetGroups, AddGroup, GetGroupUsers, GetAllUsers, AddGroupUser, RemoveGroupUser, ModifyGroup } from '@/api/task/workTaskManageApi.js'
import { valid } from 'mockjs'
export default {
  data() {
    return {
      projectDialogVisible: false, // 项目管理对话框是否可见

      groupRules: {
        WTG_Title: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        WTG_CheckPassWay: [{ required: true, message: '请选择审核方式', trigger: 'blur' }]
      }, // 新项目表单验证规则
      taskGroups: [], // 任务组列表
      seletedPrj: null, // 选中的任务组
      grpUsers: [], // 任务组的成员
      users: [], // 所有人员
      addingUser: { WTGU_EmpId: '' }, // 要添加的成员
      addGroupUserVis: false, // 添加成员对话框是否可见
      roles: [],
      editingGrpVis: false,
      editingGrp: null
    }
  },
  watch: {
    seletedPrj(value) {
      if (value) {
        // 获取任务组的成员
        GetGroupUsers(value.WTG_ID).then(r => {
          this.grpUsers = r.data
        })
      }
    }
  },
  methods: {
    // 打开项目管理对话框
    openProjectDialog() {
      this.projectDialogVisible = true
    },
    // 关闭项目管理对话框
    closeProjectDialog() {
      this.projectDialogVisible = false
      this.editingGrp = { WTG_Title: '' }
    },

    // 添加用户
    addUsersToGroup() {
      if (!this.seletedPrj || !this.seletedPrj.WTG_ID) {
        this.$message({ message: "请选择项目", type: "warning" })
        return
      }
      if (!this.addingUser || !this.addingUser.WTGU_EmpId) {
        this.$message({ message: "请选择成员", type: "warning" })
        return
      }
      this.addingUser.WTGU_GroupId = this.seletedPrj.WTG_ID;
      AddGroupUser(this.addingUser).then(r => {
        this.addingUser = {}
        this.addGroupUserVis = false
        GetGroupUsers(this.seletedPrj.WTG_ID).then(r => {
          this.grpUsers = r.data
        })
        this.$emit('updated')
      })
    },
    // 删除任务组用户
    removeGroupUser(usr) {
      this.$confirm(`确定移除用户${usr.USR_Name}?`).then(r => {
        RemoveGroupUser(usr).then(r => {
          GetGroupUsers(this.seletedPrj.WTG_ID).then(r => {
            this.grpUsers = r.data
          })
          this.$emit('updated')
        })
      })
    },
    getGroups() {
      GetGroups().then(response => {
        this.taskGroups = response.data
      })
    },
    // 新增方法
    showProjectDialog() {
      this.newGroup = { WTG_Title: '' };
      this.projectDialogVisible = true;
    },

    addGroup() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
          if (this.editingGrp.WTG_ID) {
            ModifyGroup(this.editingGrp).then(r => {
              this.getGroups()
              this.$message.success('修改项目成功');
              this.editingGrp = null;
              this.editingGrpVis = false
              this.$emit('updated')
            })
          } else {
            AddGroup(this.editingGrp).then(r => {
              this.getGroups()
              this.$message.success('项目添加成功');
              this.editingGrp = null;
              this.editingGrpVis = false
              this.$emit('updated')
            })
          }

        }
      });
    },

    deleteGroup(index) {
      this.$confirm('确定删除该项目吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.taskGroups.splice(index, 1);
        this.$message.success('删除成功');
        this.$emit('updated')
      });
    },
  },
  mounted() {
    GetRoles().then(t => this.roles = t.data)
    // 获取任务组列表
    GetGroups().then(t => this.taskGroups = t.data)
    // 获取所有人员
    GetAllUsers().then(u => this.users = u.data)

  }
}
</script>
<style>
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>